import alertFill from "@/assets/image/icons/alert-fill.svg";
import CustomModal from "@/components/customModal";
import { ProForm } from "@ant-design/pro-components";
import { Flex, Form, message, Space } from "antd";
import React, { useRef, useState } from "react";
import { history, Outlet } from "umi";
import { StyledAgree, StyledCancel } from "@/components/button";
import { StyledCardBorder, StyledTextAlign } from "@/components/common-styled";
import { CustomTitle } from "@/components/customTitle";
import { PaddingContent } from "@/components/page-padding";
// import styled from "styled-components";

import CustomTag from "@/components/tag";
import { formatMonthYear } from "@/utils/dateUtils";
import { CalendarOutlined } from "@ant-design/icons";
import useParkStore from "@/store/parkStore";
import TermsCheck from "../create-booking/components/terms-check";
import { getCreateBooking } from "@/services/carPark";

const MonthlyPark: React.FC = () => {
  const [form] = Form.useForm();
  const formRef = useRef(form);

  const date = new Date(); // 获取当前日期
  const formattedDate = formatMonthYear(date); // 调用工具函数格式化日期

  const { parkList } = useParkStore();

  // const deadline = 1000 * 30; // Moment is also OK
  // 取消cancel booking
  const [isModalCancel, setIsModalCancel] = useState(false);
  // 是否需要提交状态
  const [isNeedSubmit, setIsNeedSubmit] = useState(false);

  const onFinish = async (values: any) => {
    console.log("Form values=====", values);

    console.log(parkList, "parkList.parkId");
    if (!parkList.parkId) {
      message.error("please select a car park at least");
      return;
    }
    // history.push("/payment/monthly/payment-info");
    // 处理提交逻辑

    setIsNeedSubmit(true);
    history.push("submit");
  };
  //错误验证拦截
  const onFinishFailed = () => {
    message.error({ content: "please check required field" });
    const firstInvalidField = document.querySelector(
      ".ant-form-item-has-error"
    );
    if (firstInvalidField) {
      firstInvalidField.scrollIntoView({ behavior: "smooth" });
    }
  };

  const handleClickNext = () => {
    // setIsNeedSubmit(true);

    // setIsModalCancel(true);
    getCreateBooking({
      //test
      userId: "232323",
      lpnId: "tt",
      tariffId: "222",
      comId: "222",
      pymPrice: "178",
      startDate: "2024-10-23",
      duration: "7",
      //根据什么页面来判断
      passType: "MONTHLY",
    });

    history.push("submited");
  };

  // // Submit Modal   submit 提交
  const handleOkCancel = async () => {
    //处理提交数据
    history.back();
  };

  const handleCancelBtn = () => {
    setIsModalCancel(true);
  };

  const handleCancelBooking = () => {
    setIsModalCancel(false);
  };

  return (
    <>
      <PaddingContent>
        <CustomTitle>
          <Flex align="center">
            <div> Register Monthly Ballot</div> &emsp;
            <CustomTag
              bgColor="#F3E9D5"
              color="#7A6145"
              title={formattedDate}
              titleColor="#7A6145"
              icons={<CalendarOutlined />}
            ></CustomTag>
          </Flex>
        </CustomTitle>
        <StyledCardBorder>
          <ProForm
            initialValues={{}}
            form={form}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            submitter={{
              render: () => (
                <StyledTextAlign>
                  <Space size="large">
                    <StyledCancel type="default" onClick={handleCancelBtn}>
                      {isNeedSubmit ? "Back" : "Cancel"}
                    </StyledCancel>
                    <StyledAgree
                      onClick={
                        isNeedSubmit
                          ? handleClickNext
                          : () => formRef.current?.submit()
                      }
                      type="default"
                    >
                      {isNeedSubmit ? "Submit" : "Next"}
                    </StyledAgree>
                  </Space>
                </StyledTextAlign>
              ),
            }}
          >
            <Outlet />
            <TermsCheck />
          </ProForm>
        </StyledCardBorder>
      </PaddingContent>
      <CustomModal
        icon={alertFill}
        title=" Cancel Booking?"
        content="The associated data will be permanently erased."
        onOk={handleOkCancel}
        onCancel={handleCancelBooking}
        isModalOpen={isModalCancel}
        btnLeftText="Cancel"
        btnRightText="Cancel Booking"
        btnRightBgColor="#C02020"
      />
      {/* submitted Failed modal */}
    </>
  );
};

export default MonthlyPark;
